<template>
	<div>
		<el-card shadow="hover" style="height: 100%;" class="my">
			<template #header>
				<div class="flex-space-between">
					<div class="left">
						<el-text size="large">
							出库流水
						</el-text>
					</div>
					<div class="right">
						<el-tooltip placement="top" effect="light" content="更多">
							<div class="my-a">
								<el-icon color="#676967">
									<MoreFilled />
								</el-icon>
							</div>
						</el-tooltip>
					</div>
				</div>
			</template>
			<!--  -->
			<el-table :data="tableData" stripe :default-sort="{ prop: 'date', order: 'descending' }" border
				style="width: 100%;height: 276px;margin-top: -1px;" class="my">
				<el-table-column width="40px" prop="id" :sortable="false"></el-table-column>
				<el-table-column prop="outbound_order" label="初期库存留存日" :sortable="false"></el-table-column>
				<el-table-column prop="outbound_status" label="商品编码" :sortable="false">
					<template #default="scope">
						<el-tag v-if="scope.row.outbound_status?.color" :title="scope.row.outbound_status.label"
							style="border: 0;" round :color="scope.row.outbound_status.color" effect="dark">
							{{scope.row.outbound_status.label}}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="outbound_type" label="商品名称" :sortable="false">
					<template #default="scope">
						<el-tag v-if="scope.row.outbound_type?.color" :title="scope.row.outbound_type.label"
							style="border: 0;" round :color="scope.row.outbound_type.color" effect="dark">
							{{scope.row.outbound_type.label}}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="outbound_products" label="规格型号" :sortable="false">
					<template #default="scope">
						<el-tag v-if="scope.row.outbound_products?.color" class="my"
							:title="scope.row.outbound_products.label" style="border: 0;max-width: 100%;"
							:style="{color:scope.row.outbound_products.f_color}" round
							:color="scope.row.outbound_products.color" effect="dark">
							{{scope.row.outbound_products.label}}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="outbound_count" label="商品分类" :sortable="false"></el-table-column>
				<el-table-column prop="outbound_date" label="单位" :sortable="false"></el-table-column>
				<el-table-column prop="applicant" label="申请人" :sortable="false">
					<template #default="scope">
						<el-tag v-if="scope.row.applicant?.color" class="my" :title="scope.row.applicant.username"
							style="border: 0;max-width: 100%;padding-left: 0;" :style="{color:scope.row.applicant.f_color}"
							:color="scope.row.applicant.color" round effect="dark">
							<el-avatar :size="20" :src="scope.row.applicant.image"
								style="margin-right: 6px;min-width: 20px;" />
							{{scope.row.applicant.username}}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="approver" label="审批人" :sortable="false">
					<template #default="scope">
						<el-tag v-if="scope.row.approver?.color" class="my" :title="scope.row.approver.username"
							style="border: 0;max-width: 100%;padding-left: 0;" :style="{color:scope.row.approver.f_color}"
							:color="scope.row.approver.color" round effect="dark">
							<el-avatar :size="20" :src="scope.row.approver.image"
								style="margin-right: 6px;min-width: 20px;" />
							{{scope.row.approver.username}}
						</el-tag>
					</template>
				</el-table-column>
			</el-table>
			<!--  -->
			<el-pagination class="my" style="height: 40px;" layout="prev, pager, next" :pager-count="6" :page-size="7"
				:total="140">
			</el-pagination>
		</el-card>
		<!--  -->
	</div>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	//
	const tableData = [{
		id: 1,
		outbound_order: '',
		outbound_status: '',
		outbound_type: '',
		outbound_products: {
			label: '松木蛋卷桌大号1.2m｜在库543件',
			value: 2,
			color: '#eaeaea',
			f_color: 'rgba(0, 0, 0, 0.85)'
		},
		outbound_count: 1,
		outbound_date: '',
		applicant: '',
		approver: '',
	}, {
		id: 2,
		outbound_order: '',
		outbound_status: '',
		outbound_type: '',
		outbound_products: {
			label: '克米特椅大号｜在库681件',
			value: 2,
			color: '#eaeaea',
			f_color: 'rgba(0, 0, 0, 0.85)'
		},
		outbound_count: 0,
		outbound_date: '',
		applicant: '',
		approver: '',
	}, {
		id: 3,
		outbound_order: 'CK23030001',
		outbound_status: {
			label: '已出库',
			value: 1,
			color: '#2fba2f'
		},
		outbound_type: {
			label: '其他出库',
			value: 2,
			color: '#1fcccc'
		},
		outbound_products: {
			label: '松木蛋卷桌大号1.2m｜在库543件',
			value: 2,
			color: '#eaeaea',
			f_color: 'rgba(0, 0, 0, 0.85)'
		},
		outbound_count: 35,
		outbound_date: '2023-03-24',
		applicant: {
			image: '/images/lsc.jpg',
			username: '李书城',
			color: '#eaeaea',
			f_color: 'rgba(0, 0, 0, 0.85)'
		},
		approver: {
			image: '/images/lsc.jpg',
			username: '李书城',
			color: '#eaeaea',
			f_color: 'rgba(0, 0, 0, 0.85)'
		},
	}, {
		id: 4,
		outbound_order: 'CK23040001',
		outbound_status: {
			label: '已出库',
			value: 1,
			color: '#2fba2f'
		},
		outbound_type: {
			label: '其他出库',
			value: 2,
			color: '#1fcccc'
		},
		outbound_products: {
			label: '松木蛋卷桌大号1.2m｜在库543件',
			value: 2,
			color: '#eaeaea',
			f_color: 'rgba(0, 0, 0, 0.85)'
		},
		outbound_count: 2,
		outbound_date: '2023-04-28',
		applicant: {
			image: '/images/xhy.jpg',
			username: '徐宏远（曦扬）',
			color: '#eaeaea',
			f_color: 'rgba(0, 0, 0, 0.85)'
		},
		approver: {
			image: '/images/xhy.jpg',
			username: '徐宏远（曦扬）',
			color: '#eaeaea',
			f_color: 'rgba(0, 0, 0, 0.85)'
		},
	},];
</script>
<style>
	@import '../../assets/css/index.css'; 
</style>
<style scoped lang="scss">
	@import '../../assets/css/index.scss';
</style>